body:where(:global(.mb-wrapper)) {
  background-color: transparent;
}

.EmbedFrame {
  color: var(--mb-color-text-primary);
}

.EmbedFrame,
/* this is to make it work when exporting to pdfs, where the EmbedFrame is not part of the exported dom */
.WithThemeBackground {
  background-color: var(--mb-color-bg-dashboard);
  border-color: var(--mb-color-border);
}

.EmbedFrameHeader,
.EmbedFrameFooter {
  color: var(--mb-color-text-primary);
  background-color: var(--mb-color-bg-dashboard);
}

.EmbedFrame,
.EmbedFrame .DashCard .Card,
.EmbedFrame .ContentContainer,
.EmbedFrame .EmbedFrameHeader,
.EmbedFrame .Separator,
.EmbedFrame .ParameterFieldSet,
.EmbedFrame .ParametersWidgetContainer,
.EmbedFrame .EmbedFrameFooter,
.EmbedFrame .LogoBadge {
  transition: var(--transition-theme-change);
}

.ParameterPanel.AllowSticky {
  position: sticky;
  top: 0;
  left: 0;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: transparent;
}

.ParameterPanel.IsSticky {
  background-color: color-mix(
    in srgb,
    var(--mb-color-bg-white),
    var(--mb-color-bg-dashboard) 15%
  );
  border-bottom-color: var(--mb-color-border);
}

/**
  * role="tooltip" works with both legacy and Mantine popover,
  * the legacy Popover however, has the role "tooltip", but with data-theme="popover",
  * so we need to target exactly just tooltips.
  */
[role="tooltip"]:is(
    [data-theme~="tooltip"],
    :global(.emotion-Tooltip-tooltip)
  ) {
  --mb-color-text-primary: color-mix(
    in srgb,
    var(--mb-color-text-white) 90%,
    transparent
  );
  --mb-color-text-secondary: color-mix(
    in srgb,
    var(--mb-color-text-white) 65%,
    transparent
  );
  --mb-color-text-tertiary: color-mix(
    in srgb,
    var(--mb-color-text-white) 45%,
    transparent
  );
  --mb-color-bg-light: var(--mb-color-bg-darker);
}

.NoBackground {
  --mb-color-bg-dashboard: transparent;
}

[data-metabase-theme="transparent"][data-metabase-theme="transparent"] {
  .EmbedFrame {
    background-color: transparent;

    .DashCard .Card {
      background-color: transparent;
    }
  }

  .WithThemeBackground {
    background-color: transparent;
  }

  .EmbedFrameHeader,
  .EmbedFrameFooter {
    background-color: transparent;
  }

  .ParameterPanel.IsSticky {
    background-color: color-mix(
      in srgb,
      var(--mb-color-bg-white),
      transparent 15%
    );
    border-bottom-color: transparent;
  }
}

.CompactExportAsPdfButton {
  position: absolute;
  right: 1rem;
  top: 0.5rem;
  z-index: 1;
}

.CompactExportAsPdfButton.ParametersVisibleWithNoTabs {
  top: 1.75rem;

  /* (metabase#59503) We want to fix this differently (here's the first attempt https://github.com/metabase/metabase/pull/59418).
  So we should just make this work for this particular case for now rather than marking a markup change.

  The reason we need `z-index: 4` here is because the parameter container is defined after this download button in the DOM, and it
  has `z-index: 3`. */
  z-index: 4;
}
